<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>作品比赛信息</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

    <style>
        * {
            margin: 0;
            padding: 0;


        }

        body {
            background-color: rgb(243, 243, 243);
        }

        .touxiang {
            width: 130px;
            height: 130px;
            margin-top: 10px;
            margin-left: 18px;
            border: 2px solid #868a94;

        }

        .ImgNameID {
            margin-top: 30px;
            margin-left: 30px;
        }

        .recommend {
            margin-left: 2px;
            width: 290px;
            height: 30px;
            text-align: center;

            border-radius: 2px;
            margin-bottom: 5px;
            background-color: #66cccc;
            color: white;
            font: normal 500 17px "Microsoft Yahei";
        }

        .recommendP {
            line-height: 30px;
        }

        .image {
            width: 160px;
            height: 120px;

        }

        .recommendJT {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;
            border: 1px solid white;
            border-radius: 2px;
        }

        .recommendJT:hover {
            box-shadow: 2px 2px 5px rgb(212, 211, 211);
        }

        .number {
            font: normal 700 20px "Microsoft Yahei";
            text-align: center;
            width: 30px;
            height: 30px;
            color: white;
            background-color: #66cccc;
        }

        .fire {
            font-size: 15px;
            color: red;
        }

        .zanRecommend {
            color: red;
        }

        .workName {
            font: normal 600 40px "Microsoft Yahei";
            text-shadow: 2px 2px 2px #66cccc;
            margin-top: 10px;
        }

        .synopsis {
            font: normal 550 20px "Microsoft Yahei";
            margin-top: 10px;
            margin-left: 10px;
        }

        .showH {
            font: normal 550 20px "Microsoft Yahei";
            margin-top: 10px;
            margin-left: 10px;
        }

        .synopsisSpan {
            margin-top: 20px;
            border-radius: 2px;
            background-color: #fff;
        }

        .paragraph1 {
            margin-left: 10px;
            color: rgb(70, 68, 68);
        }

        .ZAN {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            width: 11vw;
            height: 65px;
            box-shadow: -1px 1px 5px rgba(160, 155, 155, 0.5);
            margin-top: 10px;
            border-radius: 2px;
            background-color: #fff;
        }

        .DianZan {
            background-color: rgb(243, 243, 243);
            color: #66cccc;
            width: 40px;
            height: 40px;
            border-radius: 3px;
            margin-top: 13px;
            border: none;
            outline: none;
            cursor: pointer;
            font-size: 20px;

        }

        .zanChange {
            color: red;
        }


        .share {
            background-color: rgb(243, 243, 243);
            width: 40px;
            height: 40px;

            border-radius: 3px;
            margin-top: 13px;
            margin-left: 1px;
            border: none;
            outline: none;
            cursor: pointer;
            color: #66cccc;
            font-size: 20px;
        }

        .collect {
            color: #66cccc;
        }

        .collectChange {
            color: rgb(255, 153, 0);
        }

        .zanNUM {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            margin-left: 20px;
            color: rgb(138, 135, 135);
            margin-top: 10px;
        }

        .cs {
            color: rgb(138, 135, 135);
            margin-left: 10px;
        }

        .Information {
            width: 11vw;
            box-shadow: -1px 1px 5px rgba(160, 155, 155, 0.5);
            margin-top: 20px;
            border-bottom: 13px solid white;
            border-radius: 2px;
            background-color: #fff;
        }

        .ShowDiv {
            background-color: #fff;
            margin-top: 20px;
        }

        .right {
            margin-top: 20px;
        }

        .colunm {
            margin-right: 10px;
        }

        .author {
            text-align: center;
            margin: 5px;
            color: rgb(70, 68, 68);
        }

        .astudyNo {
            text-align: center;
            margin: 5px;
            color: rgb(70, 68, 68);

        }

        .smallPrint {
            background-color: rgb(243, 243, 243);
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
        }

        .authorM {
            color: rgb(138, 135, 135);
            margin-top: 10px;
            margin-left: 10px;
        }

        .workShowDiv {
            margin-left: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>


<body>


    <div class="container">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <div class="row clearfix">

                    <div class="col-md-2 column">
                        <div class="Information">
                            <img alt="140x140" src="../资源文件/img/WorksShow柯南.jpeg" class="img-circle touxiang" />
                            <p class="author"></p>
                            <p class="astudyNo"></p>

                        </div>
                        <div class="ZAN">
                            <span>
                                <button class="DianZan"><span
                                        class="glyphicon glyphicon glyphicon-thumbs-up"></span></button>
                            </span>
                            <span>
                                <button class="share collect"><span class="glyphicon glyphicon-star"></span></button>
                            </span>
                            <span>
                                <button class="share" data-toggle="modal" data-target="#myModal"><span
                                        class="glyphicon glyphicon-share"></span></button>
                            </span>
                        </div>

                    </div>
                    <div class="col-md-6 column ShowDiv">
                        <div class="title">
                            <span>
                                <h3 class="workName">
                                </h3>
                            </span>
                            <div class="smallPrint">
                                <p class="authorM"></p>
                                <span class="zanNUM">
                                    <p class="cs">&#10084;</p>
                                    <p class="zanNump"></p>
                                    <p class="cs"><span class="glyphicon glyphicon-star"></span></p>
                                    <p class="collectNump"></p>
                                </span>
                            </div>
                            <!-- <span class="ImgNameID">
                                <img alt="14x14" src="../资源文件/img/WorksShow柯南.jpeg" class="img-circle touxiang" />
                            </span> -->
                            <div>

                            </div>
                            <div class="synopsisSpan">
                                <h3 class="synopsis">
                                    作品简介（比赛信息）
                                </h3>
                                <span class="synopsisP">
                                    <p class="paragraph1"></p>
                                    <!-- <p class="paragraph2"></p> -->
                                </span>


                            </div>
                            <div class="showSpan">
                                <h3 class="showH">
                                    作品展示
                                </h3>
                                <div class="workShowDiv">

                                </div>

                                <!-- <div class="row clearfix">
                                    <div class="col-md-4 column img">
                                        <img alt="140x140" src="q567.jpg" class="img-thumbnail" />

                                    </div>
                                    <div class="col-md-4 column video">
                                        <video width="400" height="300" controls autoplay>
                                            <source src="罗小黑剪辑.mp4" type="video/mp4">
                                            <source src="movie.ogg" type="video/ogg">
                                            <source src="movie.webm" type="video/webm">
                                    </div>
                                    <div class="col-md-4 column audio">
                                        <img alt="140x140" src="q567.jpg" class="img-thumbnail" />
                                        <audio controls="controls">
                                            <source src="/i/song.ogg" type="audio/ogg">
                                            <source src="苏打绿+-+小情歌.mp3" type="audio/mpeg">
                                    </div>
                                </div> -->

                            </div>


                        </div>
                    </div>
                    <div class="col-md-4 column right">

                        <div class="row recommend">
                            <p class="recommendP">热门作品推荐 <span class="glyphicon glyphicon-fire fire"></span></p>

                        </div>
                        <div class="row recommendDiv">
                            <!-- <div class="col-md-10">
                                <div class="thumbnail recommendJT">
                                    <span>
                                        <p class="number">
                                            1
                                        </p>
                                        <p>
                                            作品名
                                        </p>
                                        <p>
                                            作者
                                        </p>
                                        <p>
                                        <p class="zanRecommend">&#10084;</p>
                                        </p>
                                    </span>

                                    <span class="image">

                                        <img alt="300x200" src="../资源文件/img/WorksShow钢炼.jpg" class="image" />
                                    </span>
                                </div>
                            </div> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        分享给你的好友
                    </h4>
                </div>
                <div class="modal-body">
                    <form role="form"><input id="testInput" type="text" name="" value="复制的内容" class="form-control">
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal" onclick="Copy()">复制链接</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal -->
    </div>


    <script>
        var content = $('#testInput');
        document.getElementById('testInput').value = document.documentURI;//获取本页链接
        function Copy() {//复制函数
            content.select();
            document.execCommand('Copy');
        }

        var Rimgsrc;
        var RworkName;
        var Rname;
        var Rtime;
        var Rzan;

        $(function () {
            $.ajax({
                type: "get",
                url: "http://39.97.237.157:8081/api/getallarticlesbyhot",
                success: fill
            });

            function fill(data) {
                var Number = 1;

                //优秀作品推荐
                for (var i = 0; i < 4; i++) {
                    // var Rimgsrc = '../资源文件/img/WorksShow钢炼.jpg';
                    var Rimgsrc = data.data[i].cover;
                    // var gang=imgsrc.lastIndexOf("/",24);
                    // var R=imgsrc.substr(gang); 
                    // var Rimgsrc='http://123.57.207.22:8080'+R;
                    var name = data.data[i].name;
                    var proName = data.data[i].proName;
                    var lNumber = data.data[i].lNumber;
                    var id = data.data[i].proId;

                    $('.recommendDiv').before('<div class="col-md-10"> <div class="thumbnail recommendJT" onclick="jump(' + id + ');"><span> <p class="number">' + Number + '</p><p>' + proName + '</p><p>作者:' + name + '</p></span><span class="image"><img alt="300x200" src="' + Rimgsrc + '" class="image" /></span></div></div>');
                    Number++;
                }
            }
            //cookie点赞+收藏
            /* var isZAN = $.cookie('isZan');
            if (isZAN == true) {
                $(".DianZan").toggleClass('zanChange');
            }
            var isCollect = $.cookie('isCollect');
            if (isZAN == true) {
                $(".collect").toggleClass('collectChange');
            } */

        })

        //跳转
        function jump(id) {
            window.open("WorksOne.html?id=" + id, "_blank");
        }


        //跳转
        var para = location.href.split('?')[1];
        var id = location.href.split('=')[1];


        $(function () {

            $.ajax({
                type: "post",
                url: "http://39.97.237.157:8081/api/getproductsbyid",
                data: { id: id },
                success: fill
            });
            function fill(data) {

                var author = data.data.name;//作者
                var studentId = data.data.studyNo;
                var text = data.data.proContent;//作品内容
                var title = data.data.proName;//作品名称
                var astudyNo = data.data.astudyNo;
                var proIntroduction = data.data.proIntroduction;
                console.log(author);
                console.log(data);


                //加载相关信息
                $('.paragraph1').append(proIntroduction);
                $('.workName').append(title);
                $('.author').text('昵称：' + author);
                $('.authorM').text(author);
                $('.astudyNo').text('学号：' + studentId);

                //加载作品展示内容
                // var text='../资源文件/img/开发规范.pdf';
                // 获取最后一个'.'的角标  返回的是数字
                var point = text.lastIndexOf(".");
                // 抽取字符串 substr() 方法可在字符串中抽取从 point下标开始的指定数目的字符。
                var type = text.substr(point + 1);
                type = $.trim(type);
                console.log(type);
                if (type == 'jpeg' || type == 'jpg' || type == 'png' || type == 'gif') {
                    console.log(text);
                    var imgsrc = text;
                    $('.workShowDiv').append('<img alt="140x140" src="' + imgsrc + '" class="img-thumbnail" />')
                } else if (type == 'mp4') {
                    var videosrc = text;
                    $('.workShowDiv').append(' <video width="360" height="270" controls autoplay muted><source src="' + videosrc + '" type="video/mp4"><source src="movie.ogg" type="video/ogg"><source src="movie.webm" type="video/webm">');
                } else if (type == 'mp3') {
                    var imgsrc = "../资源文件/img/音乐.jpg";
                    var audiosrc = text;
                    $('.workShowDiv').append('<img alt="140x140" src="' + imgsrc + '" class="img-thumbnail" /><audio controls="controls"><source src="/i/song.ogg" type="audio/ogg"><source src="' + audiosrc + '" type="audio/mpeg">');
                } else {
                    $('.workShowDiv').html('<a href="' + text + '" target="_blank">作品内容--请点击查看');
                    console.log(text);

                }

            }
        })
        
        //点赞收藏--前端
        var numzan = 100;
        $(".zanNump").text(numzan);
        var numcollect = 100;
        $(".collectNump").text(numcollect);
        var isZan = false;
        var ZanNum = 1;
        var isCollect = false;
        var CollectNum = 1;
        $(".DianZan").click(function () {
            if (ZanNum % 2 == 1 && isZan == false) {
                $(this).toggleClass('zanChange');
                isZan = true;
                $(".zanNump").text(numzan += 1);
                ZanNum++;
                console.log(ZanNum);

            } else if (ZanNum % 2 == 0 && isZan == true) {
                $(this).toggleClass('zanChange');
                isZan = false;
                $(".zanNump").text(numzan -= 1);
                ZanNum++;
                console.log(ZanNum);

            }
            $.cookie('isZan', isZan, { expires: 7 });
            $.cookie('isZan');
        })

        $(".collect").click(function () {
            if (CollectNum % 2 == 1 && isCollect == false) {
                $(this).toggleClass('collectChange');
                isCollect = true;
                $(".collectNump").text(numzan += 1);
                CollectNum++;

            } else if (CollectNum % 2 == 0 && isCollect == true) {
                $(this).toggleClass('collectChange');
                isCollect = false;
                $(".collectNump").text(numzan -= 1);
                CollectNum++;

            }

        })




        //点赞数和收藏数
        /*   var numzan;
          var numCollect;
          function getZan() {
              $.ajax({
                  type: "get",
                  url: "http://39.97.237.157:8081/api/likearticles",
                  success: fill
              });
              function fill(data) {
                  var numzan = data.data.lNumber;
                  $(".zanNump").text(numzan);
              }
          }

          function getCollect() {
              $.ajax({
                  type: "get",
                  url: "http://39.97.237.157:8081/api/likearticles",
                  success: fill
              });
              function fill(data) {
                  var numCollect = data.data.lNumber;
                  $(".collectNump").text(numCollect);
              }
          }

          getZan();
          getCollect();


          //点赞--后端
          var isZan = false;
          var ZanNum = 1;

          var uid = $.cookie('uId');
          $(".DianZan").click(function () {

              $.ajax({
                  type: "post",
                  url: "http://39.97.237.157:8081/api/likearticles",
                  data: {
                      uid: uId,//用户id
                      proid: id//作品id
                  },
                  success: fill
              });
              function fill(data) {
                  getZan();

              }

              //改变点赞的样式
              if (ZanNum % 2 == 1 && isZan == false) {
                  $(this).toggleClass('zanChange');
                  isZan = true;
                  // $(".iszan").text("点赞成功");
                  // $(".zanNump").text(numzan += 1);
                  ZanNum++;
                  // console.log(ZanNum);

              } else if (ZanNum % 2 == 0 && isZan == true) {
                  $(this).toggleClass('zanChange');
                  isZan = false;
                  // $(".iszan").text("取消点赞");
                  // $(".zanNump").text(numzan -= 1);
                  ZanNum++;
                  // console.log(ZanNum);

              }


          })

          //收藏--后端
          var isCollect = false;
          var CollectNum = 1;

          $(".collect").click(function () {
              $.ajax({
                  type: "post",
                  url: "http://39.97.237.157:8081/api/likearticles",
                  data: {
                      uid: uId,//用户id
                      proid: id//作品id
                  },
                  success: fill
              });
              function fill(data) {
                  getCollect();

              }

              //改变收藏的样式
              if (CollectNum % 2 == 1 && isCollect == false) {
                  $(this).toggleClass('collectChange');
                  isCollect = true;
                  // $(".iszan").text("点赞成功");
                  // $(".zanNump").text(numzan += 1);
                  CollectNum++;
                  // console.log(ZanNum);

              } else if (CollectNum % 2 == 0 && isCollect == true) {
                  $(this).toggleClass('collectChange');
                  isCollect = false;
                  // $(".iszan").text("取消点赞");
                  // $(".zanNump").text(numzan -= 1);
                  CollectNum++;
                  // console.log(ZanNum);

              }


          })

          //点赞+收藏---cookie
          $(window).unload(function () {
              //响应事件
              $.cookie('isZan', isZan, { expires: 7 });
              $.cookie('isCollect', isCollect, { expires: 7 });

          }); */

    </script>


</body>

</html>